<template>
<!--  头部信息区-->
  <div class="tb-div">
    <span>预约挂号</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
      @click="seeAddApplicationDialogVisible">新增挂号单</el-button>
  </div>
<!--  新增预约挂号单主体-->
  <el-dialog :title="dialogTitle" v-model="addApplicationDialogVisible" class="yy-table" style="':before-close': handleClose">
    <el-form label-width="80px" label-position="top">
    <el-row >
      <el-col :span="12">
        <el-form-item label="患者名称" >
          <el-input placeholder="患者名称" v-model="addApplication.name"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别">
            <el-radio-group aria-placeholder="性别" v-model="addApplication.gender">
              <el-radio label="男" border value="1" style="margin: 0;"></el-radio>
              <el-radio label="女" border value="0"></el-radio>
            </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="年龄" >
            <el-input  placeholder="请输入患者年龄" v-model="addApplication.age"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证" >
            <el-input  placeholder="请输入患者身份证号" v-model="addApplication.identityCard"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="预约就诊时间" >
          <el-date-picker type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="addApplication.scheduleTime"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系方式" >
          <el-input  placeholder="请输入患者手机号" v-model="addApplication.phone"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="挂号科室" >
          <el-input  placeholder="挂号科室" v-model="addApplication.departmentId"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预约医生" >
          <el-input  placeholder="按照科室给出医生下拉框" v-model="addApplication.physicianId"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="挂号类型" >
            <el-input  placeholder="挂号类型" v-model="addApplication.registrationType"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="就诊状态" >
            <el-input  placeholder="就诊状态" v-model="addApplication.appointmentState"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="addOutpatient">确定</el-button>
      </template>
  </el-dialog>

<!--  挂号总览-->
  <el-card class="gh-el-card">
    <el-row :gutter="10" style="margin-left: 100px" >
        <el-col :span="4" class="gh-el-col" >
          <p style="font-size: 14px">本月挂号总量</p>
          <span style="font-weight:bold;font-size: 24px; color:rgba(0, 0, 0, 0.427450980392157);">本月挂号总量</span>
        </el-col>
      <el-col :span="4" class="gh-el-col">
          <p style="font-size: 14px">本周挂号总量</p>
          <span style="font-weight:bold;font-size: 24px; color:rgba(0, 0, 0, 0.427450980392157);">本月挂号总量</span>
        </el-col>
      <el-col :span="4" class="gh-el-col">
          <p style="font-size: 14px">本周挂号总收入</p>
          <span style="font-weight:bold;font-size: 24px; color:rgba(0, 0, 0, 0.427450980392157);">本月挂号总量</span>
        </el-col>
      <el-col :span="4" class="gh-el-col">
          <p style="font-size: 14px">日均挂号量</p>
          <span style="font-weight:bold;font-size: 24px; color:rgba(0, 0, 0, 0.427450980392157);">本月挂号总量</span>
        </el-col>
      <el-col :span="4" class="gh-el-col">
          <p style="font-size: 14px">日均挂号总收入</p>
          <span style="font-weight:bold;font-size: 24px; color:rgba(0, 0, 0, 0.427450980392157);">本月挂号总量</span>
        </el-col>
    </el-row>
  </el-card>


<!-- 搜索框 及预约单列表-->
  <el-card :style="{ margin:'0px 100px', 'overflow': 'hidden'}" >
    <el-form :inline="true">
        <el-form-item>
          <el-button @click="selectOutpatient">全部</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectOutpatientStatus10">已就诊</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectOutpatientStatus20">未就诊</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectOutpatientStatus30">已取消</el-button>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="输入姓名关键字" v-model="searchOutpatient.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="value1"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              @change="updateSearchOutpatient"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectOutpatient">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
<!--预约单列表-->
    <el-table style="margin-top: 20px;font-size: 12px;" :data="tableData">
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column prop="name" label="患者" align="center"/>
      <el-table-column prop="gender" label="性别" align="center"/>
      <el-table-column prop="patientNum" label="就诊卡号" align="center"/>
      <el-table-column prop="phone" label="联系方式" align="center" />
      <el-table-column prop="departmentId" label="挂号科室" align="center"/>
      <el-table-column prop="registrationType" label="挂号类型" align="center"/>
      <el-table-column prop="username" label="预约医生" align="center"/>
      <el-table-column prop="scheduleTime" label="预约就诊时间" align="center"/>
      <el-table-column prop="queuingNumber" label="排队序号" align="center" />
      <el-table-column prop="appointmentState" label="状态" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">详情</el-button>
          <el-button link type="primary" size="small" @click="deleteVehicle(scope.row.id)">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
//搜索框时间选择器
import axios from "axios";

const value1 = ref([])

import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
//控制弹窗标题
const dialogTitle = ref("");
//控制新增挂号单弹窗是否显示
const addApplicationDialogVisible = ref(false);
// 定义新增预约单弹窗显示方法
const seeAddApplicationDialogVisible = () => {
  dialogTitle.value="新增预约单窗口";
  addApplicationDialogVisible.value = true;
}
//定义关闭新增预约单弹窗方法
const handleClose = () => {
  addApplicationDialogVisible.value = false;
  addApplication.value = {};
}
//定义对象用来存储新增预约单信息
const addApplication = ref({
  name:'',
  age:'',
  identityCard:'',
  gender:'',
  phone:'',
  departmentId:'',
  physicianId:'',
  scheduleTime:'',
  registrationType:'',
  appointmentState:''
});
//定义数组用来接收查询返回数据
const tableData = ref([])
// 定义获取搜索框时间方法
const updateSearchOutpatient = () => {
  searchOutpatient.value.startTime = value1.value[0]?.toISOString()
  searchOutpatient.value.endTime = value1.value[1]?.toISOString()
}
// 定义查询预约单对象
const searchOutpatient = ref({
  name:'',
  appointmentState:'',
  startTime: value1[0],
  endTime: value1[1]
})
// 定义进入页面加载数据方法
onMounted(()=>{
  selectOutpatient();
})

// 定义重置按钮
const reset = () => {
  searchOutpatient.value ={};
  value1.value = [];
  selectOutpatient();
}
// 定义根据预约单状态分别查询预约单
const selectOutpatientStatus10 = ()=>{
  searchOutpatient.value.appointmentState = '10';
  selectOutpatient();
}
const selectOutpatientStatus20 = ()=>{
  searchOutpatient.value.appointmentState = '20';
  selectOutpatient();
}
const selectOutpatientStatus30 = ()=>{
  searchOutpatient.value.appointmentState = '30';
  selectOutpatient();
}
// 新增预约单方法
const addOutpatient = () =>{
  console.log(addApplication.value)
  addApplication.value.appointmentState = 0;
  let data = qs.stringify(addApplication.value);
  axios.post(BASE_URL+'hospital/outpatient/save',data).then((response)=>{
    if(response.data.code==2000) {
      ElMessage.success('保存成功!');
      handleClose();
    }else {
      ElMessage.error();
    }
    })
}
// 定义方法查询挂号科室及医师用于下拉框展示
const selectOutpatientItem = () => {
}
// 定义方法查询预约单
const selectOutpatient =()=>{
  let data = qs.stringify(searchOutpatient.value);
  console.log(searchOutpatient.value)
  axios.get(BASE_URL+'hospital/outpatient/select?'+data).then((response)=>{
    if(response.data.code==2000) {
      tableData.value = response.data.data;
      searchOutpatient.value = {};
      value1.value = [];
    }else {
      ElMessage.error();
    }
  })
}
</script>


<style scoped>
/*床位总览card样式*/
.gh-el-card{
  width: 100%;
  height: 200px;
  margin: 0 30px;
  overflow: hidden;
}
/*挂号总览el-col样式*/
.gh-el-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*预约单表格样式*/
.yy-table{
  width:1000px;padding:40px;overflow:hidden;
}
/*头部信息样式*/
.tb-div{
  height: 6vh;background-color:#fff;padding:10px 20px;line-height:60px;font-size:20px;
}


</style>